<style include="internet-shared iron-flex">
  cr-policy-indicator {
    margin-inline-end: 24px;
  }

  #cellularRoamingToggleContainer:hover {
    background-color: var(--cr-hover-background-color);
  }

  #cellularRoamingToggleContainer:active {
    background-color: var(--cr-active-background-color);
  }
</style>
<template is="dom-if"
    if="[[showPerNetworkAllowRoamingToggle_(isRoamingAllowedForNetwork_)]]">
  <div id="cellularRoamingToggleContainer"
      class="settings-box"
      on-click="onCellularRoamingRowClicked_"
      actionable$="[[!isPerNetworkToggleDisabled_(disabled, prefs.cros.signed.data_roaming_enabled)]]">
    <div class="flex" id="labelWrapper">
      <div id="cellularRoamingToggleLabel" aria-hidden="true" class="label">
        $i18n{networkAllowDataRoaming}
      </div>
      <div id="cellularRoamingToggleSubLabel" aria-hidden="true"
          class="secondary label">
        [[getRoamingDetails_(managedProperties, prefs.cros.signed.data_roaming_enabled)]]
      </div>
    </div>
    <template is="dom-if"
        if="[[isRoamingProhibitedByPolicy_(prefs.cros.signed.data_roaming_enabled)]]">
      <cr-policy-indicator indicator-type="devicePolicy" on-click="doNothing_">
      </cr-policy-indicator>
    </template>
    <cr-toggle id="control" checked="{{isRoamingAllowedForNetwork_}}"
        disabled="[[isPerNetworkToggleDisabled_(disabled, prefs.cros.signed.data_roaming_enabled)]]"
        aria-labelledby="cellularRoamingToggleLabel"
        aria-describedby="cellularRoamingToggleSubLabel">
    </cr-toggle>
  </div>
</template>
